<template>
  <el-row v-loading="loading" class="main">
    <el-col :span="24" class="main">
      <el-card shadow="hover">
        <el-button
          type="success"
          style="position: absolute; margin: 0 0 0 850px; z-index: 999"
          @click="dialogVisible2 = true"
          >申请访问码
        </el-button>
        <el-table
          :data="CodeData"
          style="margin-left: 36px; margin-top: 36px"
          :default-sort="{ prop: 'date', order: 'descending' }"
        >
          <el-table-column label="授权码" width="100" align="center">
            <template #default="scope">
              <span>{{ scope.row.accessCode }}</span>
            </template>
          </el-table-column>
          <el-table-column label="开始日期" prop="start_time" width="200" align="center" sortable>
            <template #default="scope">
              <i class="el-icon-time"></i>
              <span style="margin-left: 10px">{{
                moment(scope.row.start_time).format("YYYY-MM-DD HH:mm:ss")
              }}</span>
            </template>
          </el-table-column>
          <el-table-column label="失效日期" prop="finish_time" width="200" align="center" sortable>
            <template #default="scope">
              <i class="el-icon-time"></i>
              <span style="margin-left: 10px">{{
                moment(scope.row.finish_time).format("YYYY-MM-DD HH:mm:ss")
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="状态"
            width="120"
            align="center"
            filter-placement="bottom-end"
            :filters="[
              { text: '未审核', value: 0 },
              { text: '已通过', value: 1 },
              { text: '已过期', value: 2 },
              { text: '审核未通过', value: 3 },
            ]"
            :filter-method="stateFilter"
          >
            <template #default="scope">
              <el-tag v-if="scope.row.state == 0" type="waning">未审核</el-tag>
              <el-tag v-if="scope.row.state == 1" type="success">已通过</el-tag>
              <el-tag v-if="scope.row.state == 2" type="info">已过期</el-tag>
              <el-tooltip
                v-if="scope.row.state == 3"
                :content="scope.row.suggest"
                placement="bottom"
                effect="light"
              >
                <el-tag type="danger">审核未通过</el-tag>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column label="访问住户" width="100" align="center">
            <template #default="scope">
              <span>{{ scope.row.host_id }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="200px">
            <template #default="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index)"
                :disabled="scope.row.state == 2"
                >编辑
              </el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index)"
                >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-col>
  </el-row>

  <el-dialog title="修改授权码" v-model="dialogVisible" width="30%">
    <el-form label-width="80px" :model="row">
      <el-form-item label="授权码">
        <el-input v-model="row.accessCode" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="结束时间">
        <el-date-picker
          v-model="row.finish_time"
          type="datetime"
          placeholder="选择日期时间"
          :shortcuts="shortcuts"
        >
        </el-date-picker>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="update">修改</el-button>
      </span>
    </template>
  </el-dialog>

  <el-dialog title="添加授权码" v-model="dialogVisible2" width="30%">
    <el-form label-width="0px" :model="addForm">
      <el-form-item label="">
        <el-input
          v-model="addForm.host_mobile"
          placeholder="请输入访问住户手机号码"
        ></el-input>
      </el-form-item>
      <el-form-item label="">
        <el-date-picker
          type="datetime"
          placeholder="请选择过期时间"
          v-model="addForm.finish_time"
          style="width: 100%"
        ></el-date-picker>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible2 = false">取 消</el-button>
        <el-button type="primary" @click="addCode">添加</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import moment from "moment";
import { update, add, del, get, getOne } from "@/network/access";

export default {
  name: "visitor",
  data() {
    return {
      moment,
      CodeData: [],
      loading: false,
      dialogVisible: false,
      dialogVisible2: false,
      addForm: {
        host_mobile: "",
        finish_time: "",
      },
      index: 0,
      row: {
        uid: "",
        host_mobile: "",
        finish_time: "",
      },
    };
  },
  created() {
    this.loading = true;
    this.getAll();
  },
  methods: {
    handleEdit(index) {
      this.dialogVisible = true;
      this.index = index;
      this.row = Object.create(this.CodeData[index]);
    },
    update() {
      this.row.finish_time = moment(this.row.finish_time).format(
        "YYYY-MM-DD HH:mm:ss"
      );
      update(this.row.id, this.row).then(
        (res) => {
          if (res.code == 200) {
            this.dialogVisible = false;
            this.CodeData[this.index] = this.row;
            this.row.state = 0;
            this.row.finish_time = moment(this.row.finish_time).format(
              "YYYY-MM-DD HH:mm:ss"
            );
            this.$message({
              type: "success",
              message: "修改成功",
            });
          } else {
            this.$message({
              type: "warning",
              message: res.data,
            });
          }
        },
        (err) => {
          this.$message({
            type: "error",
            message: "出错了",
          });
        }
      );
    },
    getAll() {
      get()
        .then((res) => {
          console.log(res);
          this.CodeData = res.data;
          // for (let index in res.data.data) {
          //   this.CodeData.push(res.data.data[index])
          // }
          this.loading = false;
        })
        .catch(() => {
          this.$message.error("网络错误");
          this.loading = false;
        });
    },
    handleDelete(index) {
      this.$confirm("此操作将永久删除该授权码, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          del(this.CodeData[index].id).then(
            (res) => {
              if (res.code == 200) {
                this.CodeData.splice(index, 1);
                this.$message({
                  type: "success",
                  message: "删除成功",
                });
              } else {
                this.$message({
                  type: "error",
                  message: res.data,
                });
              }
            },
            (error) => {}
          );
        })
        .catch(() => {
          this.$message.info("取消删除");
        });
    },
    addCode() {
      this.addForm.finish_time = moment(this.addForm.finish_time).format(
        "YYYY-MM-DD HH:mm:ss"
      );
      add(this.addForm).then(
        (res) => {
          if (res.code == 200) {
            this.$message({
              type: "success",
              message: "添加成功",
            });
            this.getAll();
            this.dialogVisible2 = false;
          } else {
            this.$message({
              type: "error",
              message: res.data,
            });
          }
        },
        (err) => {
          this.$message({
            type: "error",
            message: "出错了",
          });
          this.dialogVisible2 = false;
        }
      );
    },
    stateFilter(value, row) {
      return row.state === value;
    },
  },
};
</script>

<style scoped>
.main {
  height: 100%;
  background-color: #fff;
}
</style>
